Закладки

Модульная сетка сайта

Что такое модульная сетка, как она помогает пользователям, дизайнерам и разработчикам, как сделать сетку и как использовать.
Модульная сетка — универсальный инструмент организации визуального пространства, который используют и графические, и веб-дизайнеры. Использование сетки при проектировании — часть профессиональной культуры дизайнера. Рассмотрим почему она так популярна.

Что такое модульная сетка

Модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции страницы (печатной или веб). Делить страницу на модули дизайнеры придумали в середине XX века для того, чтобы упростить и ускорить конструирование макета.

Модульная сетка. На основе модулей строится сетка — вертикальные и горизонтальные линии, разделяющие страницу на прямоугольники. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: заголовки, тексты, изображения.
Пример модульной сетки, которая содержит 4 колонки и 4 ряда. Изображение или текстовый блок могут занимать один или более модулей. Источник: thinkingwithtype.com
Пример использования модульной сетки при проектировании сайта. Источник: www.behance.net/gallery/Translation-Recordings
Направляющие линии в сетке могут отсутствовать. В этом случае сами модули и образуют сетку.
Пример модульной сетки, использованной для оформления портфолио интерактивного агентства МАНУФАКТУРА.
Дмитрий Провоторов
Исполнительный директор интерактивного агентства МАНУФАКТУРА
Модулем может быть не только прямоугольник:

Зачем нужна модульная сетка

Сетка задает стандарт расположения элементов: это облегчает выравнивание элементов, добавление новых и поддержку страницы в дальнейшем. Сетка позволяет работать быстрее.

Снижает вероятность ошибок при переносе элементов с одной страницы на другую.

Помогает странице выглядеть более эстетично за счет того, что элементы пропорциональны и структурированы.

Помогает быстрее разобраться в макете новым участникам, так как в сетке всегда есть логика.

Адаптивный дизайн на основе сетки делать проще.

Кроме того, если в дизайне используется сетка, то это потом помогает пользователю быстрее считывать информацию. Сетка создает визуальный порядок и ориентироваться становится легче.

Использование модульной сетки в веб-дизайне

Модульная сетка в веб-дизайне имеет свои особенности. Содержимое сайта можно пролистывать вверх, вниз, вправо и влево — настоящих жестких границ в вебе нет. Плюс контент на сайте часто динамичный — всплывающие окна, подсказки, интерактивные элементы и т.д.

Поэтому сетка в вебе более универсальная, чем в принте. Модули не имеют жестко заданных размеров. Один и тот же элемент может изменяться в зависимости от разрешения и размера экрана.
Пример использования 12-колонночной сетки на Tilda Publishing.
Пример использования 12-колонночной сетки при проектировании разных страниц сайта.

Анатомия модульной сетки

Шрифтовая сетка

Шрифтовая сетка — горизонтальные линии, которые задают вертикальный ритм. Расстояние между линиями равно межстрочному расстоянию базового шрифта.

Например, вы планируете для основного текста использовать шрифт размером 20px, то межстрочное расстояние и, соответственно, расстояние между линиями будет 30px.

Колонки и межколонники

Колонки — вертикальные прямоугольники, которые делят страницу на части. Межколонники — расстояние между ними.

Самая распространенная сетка в веб-дизайне состоит из 12 колонок. Например, для макета шириной в 960px — 12 колонок по 60px, 20px — межколоночное расстояние.

Группы строк

Для удобства строки также можно укрупнить, объединяя в группы по 2-3 строки. В результате образуются горизонтальные «колонки», расстояние между которыми равно одной строке.

Модули

На пересечении колонок и групп строк образуются модуль — базовая единица сетки. К размеру модуля нужно отнестись внимательно. Слишком крупный даст негибкую сетку, слишком мелкий потеряет смысл.

Модули можно и нужно объединять в группы.

Микромодуль

Микромодуль — прямоугольник, который образуется между модулями. Микромодуль удобно использовать для унификации небольших расстояний.

Микромодуль используют для определения размера:

Отступа между абзацами.
Красной строки (в графике).
Внутреннего поля в плашке.
В списках и т.д.

Микромодуль можно кратно увеличить.

Иван Васин
Арт-директор и партнер дизайн-бюро «Щука»
Важно понимать, что ни сетка, ни модульность — не повод для дизайна как таковой. Модуль помогает упорядочить большое количество сущностей, привести их к той или иной зависимости. Она помогает выстроить структуру и связь элементов за счет повторяющегося подобия.

В итоге модульная структура помогает скорее зрителю, нежели дизайнеру. Созданные правила положительно влияют на удобочитаемость и последовательность восприятия.

Можно сказать, что осмысленная работа с модульной сеткой — это один из инструментов управления вниманием зрителя.

Как рассчитать сетку

Сначала нужно определиться с шириной рабочей области — пространством, в рамках которого будет располагаться контент. Самый распространенный размер для рабочей области — 960px.
Количество колонок может варьироваться и зависит от контента и ваших задач, но в вебе чаще всего встречается сетка из 12 колонок. 12 — удобное число, так как оно кратно 2, 3, 4, 6 и сетку можно легко преобразовать.
Если в дизайне есть элемент с заданными параметрами (например, баннер), то можно принять его за модуль и рассчитывать ширину колонок, исходя из размеров этого элемента.

Если жестких условий нет, тогда делим ширину рабочей области на 12 колонок.
960px / 12 = 80px
Ширина колонки и межколонника
Лучше всего колонку сделать 60px, а межколонник — 20px. В этом случае они кратны и хорошо делятся. Кроме того, ширина межколонника не может быть меньше размера кегля базового шрифта, поэтому межколонник не может быть, например, 10px.
80px = 60px+20px
Ширина колонки и межколонника
Таким образом у нас получилось 12 колонок по 60px, 11 межколонников по 20px и по 10px осталось на правое и левое поле.
960px = (60px*12)+(20px*11)+(10px+10px)
Такое распределение очень удобно для комбинаций элементов различных размеров.
Если за рабочую область принять расстояние в 1200px, то можно использовать тот же принцип, что и для 960px, только увеличить размер межколонника до 40px, а полей до 20px. Это добавит в макет «воздух».
Кроме того, в вебе есть такое понятие как Fluid Grid или «резиновая» сетка. Ее особенность в том, что расстояния для нее задаются не в пикселах, а в процентах. За 100% принимается одна колонка. Чтобы считать было проще, ширину нужно сделать 1000px.

Это позволяет сетке быть очень гибкой и используется в адаптивном дизайне.

Иван Васин
Арт-директор и партнер дизайн-бюро «Щука»
Не начинайте поиск дизайн решения с построения сетки — иначе в итоге в получите сетку, а не дизайн.

Мой опыт:
  1. делаем классный эскиз
  2. приводим наиболее приоритетные блоки к единообразию
  3. строим сетку под сложившуюся в эскизе дизайн-идею.
  4. далее, приводим к сложившейся структуре блоки, расположение которых не так принципиально.

Инструменты, которые помогут рассчитать сетку

960.gs

Готовая бесплатная сетка под разрешение 960 px для различных редакторов Fireworks, Flash, InDesign, Illustrator, Photoshop, QuarkXPress и т.д.

http://960.gs/

gridcalculator.dk

Сервис, который позволяет рассчитать сетку с заданными параметрами и скачать файл для Photoshop, Illustrator или просто изображение в формате png.

http://gridcalculator.dk/

modulargrid.org

Приложение, которое считает все параметры сетки. Можно установить на компьютер, либо сохранить паттерн для Photoshop.

http://modulargrid.org/#app

История сетки

Модульные системы

Модуль — понятие искусственное. В разное время люди создавали различные системы, которые бы позволяли воспроизвести гармоничные пропорции, которые существуют в природе естественно.

Рассмотрим несколько примеров.

Числа и спираль Фибоначчи

Числа Фибоначчи — последовательность, в которой каждое последующее число равно сумме двух предыдущих чисел. Считается, что отношение этих значений — гармоничные пропорции, которые можно и нужно применять в расчетах.

На основе этих чисел построена спираль, которая создается при помощи четверти кругов, нарисованных внутри прямоугольников. Спираль Фибоначчи применяется во разных областях, чаще в рисовании и архитектуре, для создания идеального ритма.

Витрувианский человек

Иллюстрация для книги, посвящённой трудам античного римского архитектора Витрувия, созданная Леонардо да Винчи. В соответствии с сопроводительными записями Леонардо, он был создан для определения пропорций (мужского) человеческого тела.

Например, расстояние от макушки до подбородка составляет 1/8 высоты человека, расстояние от макушки до сосков составляет 1/4 высоты, размах человеческих рук равен росту, а длина ушей — это1/3 длины лица и т.д.

Модулор

Система пропорций, разработанная архитектором Ле Корбюзье на основе традиций Витрувия, Леонардо да Винчи, работ Леона Баттисты Альберти и др. Ле Корбюзье описал её как «набор гармонических пропорций, соразмерных масштабам человека, универсально применимых к архитектуре и механике».
Система основана на измерениях человеческого тела, числах Фибоначчи и золотого сечения.

Изображения с сайта fondationlecorbusier.fr

История сетки

Книгопечатание и первые периодические издания

Библия Гутенберга — издание, которое традиционно принимают за точку отчета истории книгопечатания в Европе.

Если внимательно посмотреть на оригинал, то можно заметить следы простейшей типографской сетки. По этим линиям типограф определял расположение двух колонок, полей и колонцифр и заголовков.
С развитием печати, макеты усложнялись и появлялись системы проектирования, которые можно отнести к первым модульным сеткам. Особенно это стало актуальным с появлением периодических изданий, в которых использовалась более сложная структура расположения текста и иллюстраций.
Одно из первых применений модульной конструкции в макете — воскресный выпуск New York Herald Tribune, дизайнер Питер Палаццо, 60-е годы XX века. Источник: www.design.kg
Трех и четырех колоночная сетка в газете Newsday, дизайнер Пол Бэк. Источник: www.design.kg
Шестиколонная сетка, состоящая из 102 модулей, разработанная Массимо Виньелли для газеты The Herald. Источник: www.design.kg
Девятиколонная сетка, разработанная Аланом Флетчером для итальянской газеты 24 Ore. Источник: www.design.kg

История сетки

Швейцарский стиль

Несмотря на то, что модули и сетка использовались в дизайне и раньше, но именно последователи швейцарского стиля разработали методику применения модульной сетки для организации элементов в макете. Благодаря этому модульная сетка стала стандартом в типографике.
Швейцарский стиль — прогрессивное движение в области графического дизайна, которое зародилось в послевоенные годы в Швейцарии, быстро набрало популярность и распространилось по всему миру. Другое название этого стиля — интернациональный.
Принцип «форма следует за функцией» был девизом модернистских архитекторов после 30-х годов. Это повлияло и на швейцарский стиль, который вышел из модернистских и конструктивистских идеалов.
В основе швейцарского стиля дизайн, который должен быстро восприниматься, быть универсальным, экономичным и максимально информативным.
Один из самых ярких представителей швейцарской школы — графический дизайнер Йозеф Мюллер-Брокманн, автор книги «Модульные системы в графическом дизайне». Работы Брокманна до сих пор вдохновляют дизайнеров со всего мира.
Источник: страница Йозефа Мюллера-Брокманна на flickr.com
Источник: страница Йозефа Мюллера-Брокманна на flickr.com
«Сетка — это система помощи, но она не является гарантией, а всего лишь имеет ряд возможных применений, и каждый дизайнер сам может искать решение, соответствующее его индивидуальному стилю. Но надо научиться использовать сетку. Это искусство, которое требует практики».

— Йозеф Мюллер-Брокманн

Q&A

Что делать, если какой-то элемент не укладывается в сетку? Можно ли отступать от сетки?

Сетка должна не диктовать, а помогать в дизайне, поэтому от сетки можно и нужно отступать. Не нужно фанатично все выравнивать по сетке. Если какой-то блок не помещается, не нужно его подстраивать. Сетка — не догма.

Также в этом курсе

13
Типографика
Советы по работе с текстовым материалом. Как его структурировать, как ориентировать читателя, как работать с микротипографикой
Предыдущая
15
Психофизиология интерфейсов
Как управлять вниманием пользователя, используя базовые знания психофизиологии.
Следующая
Оглавление

© Обухов Н.В., 2015 Все права защищены. Перепечатка и цитирование материалов — только с разрешения автора.

По всем вопросам пишите на hello@tilda.cc